<template>
  <el-dialog
    :close-on-click-modal="false"
    :show-close="false"
    title="修改"
    :visible.sync="isEdit"
  >
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="form"
      label-width="140px"
      size="small"
      class="form-box"
    >
      <el-form-item label="封面图" prop="advertisersName">
        <!-- <el-input type="text" v-model="form.advertisersName" placeholder="请输入供应商名称"></el-input> -->
        <el-image
          style="width: 100px; height: 100px"
          :src="form.cover"
          fit="fill"></el-image>
          <span></span>
      </el-form-item>
      <el-form-item label="商品名称" prop="goods_id">
        <span>{{form.title}}</span>
      </el-form-item>
      <div  v-if="form.spec_list!=''">
        <div v-for="(item,index) in form.spec_list" :key="index">
          <el-form-item :label="item.key" >
            <p>{{item.key_name}}</p>
          </el-form-item>
          <el-form-item label="修改后渠道结算价" prop="platform_price">
            <el-input type="number" min="1" v-model="item.platform_price" placeholder="请输入修改后渠道结算价"></el-input>
          </el-form-item>
          <el-form-item label="可售库存" prop="stock">
            <el-input type="number" v-model="item.reset_stock" placeholder="请输入可售库存"></el-input>
          </el-form-item>
        </div>
      </div>
      <div v-if="form.spec_list==''">
        <el-form-item label="修改后渠道结算价" prop="platform_price">
        <el-input type="number" min="1" v-model="form.platform_price" placeholder="请输入修改后渠道结算价"></el-input>
        </el-form-item>
        <el-form-item label="可售库存" prop="stock">
          <el-input type="number" v-model.number="form.reset_stock" placeholder="请输入可售库存"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('closeDialog')" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import channelApi from "@/api/channel";
@Component({
  components: {}
})
export default class specialEditDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  check:boolean = true//防重复提交
  check1:boolean = true//防重复提交
  @Prop(Boolean) isEdit!: boolean;
  @Prop() mch_id!: any;
  @Prop(Object) form!: {
    shop_id:number,
    cate_id:number,
    stock: number,
    platform_price:number,
    spec_list:any,
    id:number,
    vendor_id:number,
    reset_stock:number
    };
  @Provide() subData:any= [{
    goods_id:"",
    sku_id:"",
    stock: "",
    platform_price:0,
    mch_id:""
  }]
  @Provide() fits:any= ['fill', 'contain', 'cover', 'none', 'scale-down']
  @Provide() rules: any = {
    stock: [{ required: true, message: "请输入库存", trigger: "blur" }],
    platform_price: [{ required: true, message: "请输入渠道结算价", trigger: "blur" }],
  };
  // 提交
  submitFormAdd(formName: any) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {;
          if(this.form.spec_list.length>0){
            let arr:any = []
            for(let j=0;j<this.form.spec_list.length;j++) {
              if(this.form.spec_list[j].reset_stock<=this.form.spec_list[j].stock) {
                let obj = {
                  goods_id:Number,
                  sku_id:Number,
                  stock: Number,
                  platform_price:Number,
                  mch_id:Number
                }
                obj.goods_id=this.form.spec_list[j].goods_id
                obj.sku_id=this.form.spec_list[j].id
                obj.stock=this.form.spec_list[j].reset_stock
                obj.platform_price=this.form.spec_list[j].platform_price
                obj.mch_id = this.mch_id
                
                this.check1 = true
                arr.push(obj)
              }else {
                this.check1 = false
              }
            }
            this.subData = arr
          }else{
            this.subData[0].goods_id=this.form.id
            this.subData[0].sku_id=0
            this.subData[0].platform_price=this.form.platform_price
            this.subData[0].mch_id=this.mch_id
            if(this.form.reset_stock<=this.form.stock) {
              this.subData[0].stock=this.form.reset_stock
              this.check1 = true
            }else {
              this.check1 = false
            }
          }
          if(this.check1) {
            if(this.check) {
              let _this = this
              _this.check = false
              console.log(this.check)
              channelApi.saveSet(_this.subData)
              .then((res: any) => {
                // this.$router.push({
                //   path:'/specialSet'
                // })
                
                if(res.data.data){
                  
                  _this.$message({
                    message: '操作成功',
                    type: "success"
                  });
                  
                  setTimeout(function(){
                    console.log(111)
                    _this.check = true
                  },3000)
                  _this.$emit("closeDialog");
                }else{
                  _this.$message({
                    message: res.data.msg,
                    type: "error"
                  });
                  _this.check = true
                }
              });
            }
          }else {
            this.$message({
              message: '可售库存不能大于库存',
              type: "error"
            });
          }  
      }
    });
  }
   
  created() {
    // 如果有多个特殊商品规格
    if(this.form.spec_list!='' && this.form.spec_list){
      console.log('多个特殊商品')
      this.subData=[]
      let a={goods_id:"",sku_id:"",stock: "",platform_price:0,mch_id:this.mch_id}
      this.form.spec_list.forEach((item1:any)=>{
        this.subData.push(a)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
}
</style>
